<template>
  <div id="liveGift">
    <h1 class="con-right-title">
      个人直播间礼物配置
    </h1>
    <!-- 操作按钮 -->
    <div class="table-conBtn">
      <el-button type="warning" icon="el-icon-plus" @click="addGift">
        新增
      </el-button>
    </div>
    <!-- 表格部分 -->
    <el-table v-loading="loading" :data="tableData">
      <el-table-column label="序号" min-width="80" align="center">
        <template slot-scope="scope">
          {{
            scope.$index
              | filterPage(searchParams.pageNum, searchParams.pageSize)
          }}
        </template>
      </el-table-column>
      <el-table-column
        label="礼物名称"
        prop="name"
        min-width="180"
        align="center"
      >
      </el-table-column>
      <el-table-column label="礼物主图" min-width="80" align="center">
        <template slot-scope="scope">
          <div class="img-inner-box">
            <el-image :src="scope.row.icon"></el-image>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="状态" min-width="100" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 'UP'" type="warning"
            >已上架</el-tag
          >
          <el-tag v-else-if="scope.row.status === 'DOWN'" type="info"
            >已下架</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column label="顺序" min-width="100" align="center">
        <template slot-scope="scope">
          <div
            style="cursor: pointor;background-color: #fff;"
            contenteditable="true"
            ref="giftDataNumber"
            @blur="editGiftDataNumber($event, scope.$index)"
            v-text="scope.row.number"
          ></div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" min-width="250">
        <template slot-scope="scope">
          <template>
            <el-button
              v-if="scope.row.status === 'UP'"
              type="text"
              @click="handleGoodsDisable(scope.$index)"
            >
              下架
            </el-button>
            <el-button
              v-else
              type="text"
              @click="handleGoodsEnable(scope.$index)"
            >
              上架
            </el-button>
          </template>
          <template>
            <el-button type="text" @click="editGift(scope.row, scope.$index)">
              编辑
            </el-button>
          </template>
          <template>
            <el-button type="text" @click="deleteGift(scope.$index)">
              删除
            </el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-全局组件-->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>
    <!-- 新增弹窗 -->
    <edit-dialog
      v-if="editDialogData.isShow"
      :dialog-data="editDialogData"
      @refresh="refresh"
    />
  </div>
</template>

<script>
import {
  getLiveGiftList,
  putLiveGiftList,
  addLiveGiftList,
  deleteLiveGiftList
} from '@/api/appSetting/personLiveGift'
import editDialog from './editDialog' //新增/编辑弹窗

let initDialogData = {
  isShow: false, // 控制弹框显示
  type: 'add',
  index: '',
  formData: {
    status: 'DOWN',
    icon: '',
    name: '',
    price: 0,
    priceType: 'FREE',
    number: 0,
    id: null
  }
}
export default {
  name: 'liveGiftManage',
  msg: '直播分类列表管理-列表页',
  data() {
    return {
      loading: true,
      tableData: [],
      editDialogData: initDialogData,
      total: 0,
      searchParams: {
        total: 0,
        pageNum: 1,
        pageSize: 10
      }
    }
  },
  components: {
    editDialog
  },
  mounted() {
    this.searchList()
  },
  methods: {
    // 可编辑元素失去焦点时触发判断修改值是否有变更，无变更时不予请求接口，存在变更时传递变更顺序编号至请求接口修改数据
    editGiftDataNumber(e, tableIndex) {
      if (this.tableData[tableIndex].number === parseInt(e.target.innerText))
        return false
      const data = {
        ...this.tableData[tableIndex],
        number: parseInt(e.target.innerText)
      }
      this.changeLiveGiftList(data, 'edit')
    },
    // 初始查询列表
    searchList() {
      this.loading = true
      getLiveGiftList(
        this.searchParams,
        (response) => {
          this.loading = false
          this.tableData = response.rows
          this.total = response.total
        },
        (response) => {
          this.loading = false
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    // 添加礼物
    addGift() {
      this.editDialogData = initDialogData
      this.editDialogData.isShow = true
    },
    // 编辑礼物
    editGift(row, index) {
      let formData = { ...row }
      formData.status = 'DOWN'
      this.editDialogData = {
        isShow: true, // 控制弹框显示
        type: 'edit',
        index,
        formData
      }
    },
    // 删除礼物
    deleteGift(index) {
      let _this = this
      this.$confirm('确定要在系统中永久删除礼物吗', '删除礼物', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          let data = _this.tableData[index].id
          _this.tableData.splice(index, 1)
          _this.changeLiveGiftList(data, 'delete')
        })
        .catch(() => {})
    },
    // 数组元素切换
    swapItems(arr, index1, index2) {
      arr[index1] = arr.splice(index2, 1, arr[index1])[0]
      return arr
    },
    //下架
    handleGoodsDisable(tableIndex) {
      const data = { ...this.tableData[tableIndex], status: 'DOWN' }
      this.tableData[tableIndex].status = 'DOWN'
      this.changeLiveGiftList(data, 'edit')
    },
    // 上架
    handleGoodsEnable(tableIndex) {
      const data = { ...this.tableData[tableIndex], status: 'UP' }
      this.tableData[tableIndex].status = 'UP'
      this.changeLiveGiftList(data, 'edit')
    },
    // 统一修改上架请求接口
    changeLiveGiftList(data, type) {
      switch (type) {
        case 'edit':
          putLiveGiftList(
            data,
            (response) => {
              this.searchList()
            },
            (response) => {
              this.$message({
                message: response.message,
                type: 'warning'
              })
            }
          )
          break
        case 'delete':
          deleteLiveGiftList(
            { id: data },
            (response) => {},
            (response) => {
              this.$message({
                message: response.message,
                type: 'warning'
              })
            }
          )
          break
        case 'add':
          addLiveGiftList(
            data,
            (res) => {
              this.searchList()
            },
            (response) => {
              this.$message({
                message: response.message,
                type: 'warning'
              })
            }
          )
          break
      }
    },
    /* 新增、编辑后，刷新列表 */
    refresh(data) {
      let tableData = [...this.tableData]
      const { index, type } = this.editDialogData
      if (type === 'edit') {
        tableData[index] = data
      } else {
        tableData.push(data)
      }
      this.changeLiveGiftList(data, type)
    }
  }
}
</script>

<style lang="less" scoped>
.img-inner-box {
  display: flex;
  justify-content: center;
  align-items: center;

  .el-image {
    width: 60px;
    height: 60px;
    border: 1px solid #ddd;
  }

  img {
    max-width: 100%;
    max-height: 100%;
    cursor: pointer;
  }
}
</style>
